<template>
	<u-navbar title="家长签名" left-icon-color="white" :placeholder="true" title-style="color:white" bgColor="#359FE3"
		:autoBack="true"></u-navbar>
	<view class="w-screen h-screen">
		<view class=" w-full h-full">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>


		<view class="fixed w-full p-3 bottom-0 flex justify-center item-center bg-gray-200">
			<button size="mini" type="primary" @click="action('clear')">清空</button>
			<button size="mini" type="primary" @click="action('undo')">撤消</button>
			<button size="mini" type="primary" @click="action('save')">下一步</button>
		</view>
	</view>
	<u-modal @cancel="show=false" @confirm="confirm" :show="show" title="警告" :content='alertContent'></u-modal>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				openSmooth: true,
				base64: '',
				penColor: 'black',
				penSize: 12,
				alertContent: '下一步签名完成后，将代表您已承诺以上所填写资料真是。如有虚假，您愿意承担相应责任！'
			}
		},
		onShow() {},
		methods: {
			confirm() {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						this.base64 = res.tempFilePath
						uni.setStorageSync('parentSign', this.base64)
						uni.navigateTo({
							url: '/pages/studentSign/studentSign'
						})
					}
				})
			},
			action(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.show = true
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}
	}
</script>

<style>

</style>